/* ========= Общие стили ========= */
body {
  font-family: 'Poppins', sans-serif;
  background-image: linear-gradient(to bottom right, #a2d4f7, #61a5c2, #2a6f97);
  background-attachment: fixed;
}

/* ========= Иконки ========= */
.icon {
  position: absolute;
  width: 40px;
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}

/* ========= Анимации для иконок ========= */
.animate-left-right { animation: swim-left-right 20s ease-in-out infinite; }
.animate-up-down { animation: swim-up-down 20s ease-in-out infinite; }
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes swim-left-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}
@keyframes swim-up-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(3deg); }
  75% { transform: translateY(8px) rotate(-3deg); }
}

/* ========= Кнопка ========= */
.animated-button {
  background: linear-gradient(270deg, #3b82f6, #60a5fa);
  background-size: 400% 400%;
  animation: pulseBG 6s ease infinite;
}
@keyframes pulseBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========= Бегущая строка ========= */
.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #e0f7ff;
  color: #065f7c;
  font-weight: bold;
  white-space: nowrap;
  position: relative;
  padding: 8px 0;
  border-top: 2px solid #61a5c2;
  border-bottom: 2px solid #61a5c2;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 30s linear infinite;
}
.marquee-track span {
  display: inline-block;
  padding: 0 2rem;
  font-size: 1.1rem;
}
@keyframes scroll-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-33.333%); }
}

/* ========= Портфолио: контейнер и сетка ========= */
.portfolio-fleet { padding: 64px 16px; }
.fleet-wrap { max-width: 1100px; margin-inline: auto; }
.fleet-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #1e3a8a;
  text-align: center;
  margin: 0 0 32px;
}
.fleet-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: stretch;
}
/* адаптив для сетки */
@media (min-width: 640px) {
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .fleet-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .fleet-grid { grid-template-columns: repeat(3, 1fr); }
}

/* На широких экранах (4 колонки) центрируем последнюю карточку-бота,
   растянув её на 2 колонки (встанет во 2–3 колонки из 4) */
/* @media (min-width: 1200px) {
  .fleet-grid > .ship-card--bot:last-child {
    grid-column: 2 / span 2;
  }
} */

/* ========= Карточка ========= */
.ship-card {
  position: relative;
  display: grid;
  grid-template-rows: 180px auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(30,64,175,.12);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
  max-width: 320px;
  width: 100%;
  justify-self: center;
  height: 100%;
  display: grid;
  grid-template-rows: 180px 1fr; /* верх — сцена, низ — контент */
}
.ship-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(30,64,175,.2);
}
.ship-content { 
  padding: 18px 18px 20px; 
  display: flex;
  flex-direction: column;
}
.ship-name { margin: 0 0 6px; font-size: 20px; color: #1e3a8a; }
.ship-desc { margin: 0 0 12px; color: #0f172a; opacity: .85; font-size: 14px; line-height: 1.5; }
.ship-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: auto;
}
.ship-tags li {
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(191,219,254,.6);
  color: #1e3a8a;
  border: 1px solid rgba(30,64,175,.12);
}

/* ========= Сцена с морем ========= */
.ship-scene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#dbeafe 0%, #eff6ff 70%);
}

/* ===== Волны (двойной слой) ===== */
.sea {
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  opacity: .75;
  background:
    radial-gradient(50% 24px at 25% -8px, rgba(96,165,250,.55) 60%, transparent 61%) repeat-x,
    radial-gradient(50% 24px at 75% -8px, rgba(59,130,246,.55) 60%, transparent 61%) repeat-x;
  background-size: 48px 48px, 48px 48px;
  background-position: 0 0, 24px 10px;
  animation: wavesMove 8s linear infinite;
}
.sea--back {
  height: 56%;
  opacity: .45;
  bottom: -6px;
  filter: blur(0.5px);
  background:
    radial-gradient(50% 24px at 25% -10px, rgba(147,197,253,.6) 60%, transparent 61%) repeat-x,
    radial-gradient(50% 24px at 75% -10px, rgba(96,165,250,.55) 60%, transparent 61%) repeat-x;
  background-size: 60px 60px, 60px 60px;
  background-position: 0 4px, 30px 12px;
  animation: wavesMoveSlow 16s linear infinite;
}
@keyframes wavesMove {
  0% { background-position: 0 0, 24px 10px; }
  100% { background-position: 96px 0, 120px 10px; }
}
@keyframes wavesMoveSlow {
  0% { background-position: 0 4px, 30px 12px; }
  100% { background-position: 120px 4px, 150px 12px; }
}

/* ========= Изображения кораблей ========= */
.ship-img {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  height: 90px;
  width: auto;
  object-fit: contain;
  animation: bob 5.5s ease-in-out infinite, sway 7.5s ease-in-out infinite;
  pointer-events: none;
}
.ship-card:hover .ship-img {
  transform: translate(-50%, -52%) scale(1.03) rotate(-1deg);
}

/* ========= Анимации кораблей ========= */
@keyframes bob {
  0%,100% { transform: translate(-50%, -52%); }
  50% { transform: translate(-50%, -58%); }
}
@keyframes sway {
  0%,100% { rotate: 0deg; }
  50% { rotate: -2.2deg; }
}

/* ========= Ракета ========= */
.ship-card--rocket .sea { bottom: -6px; }
.ship-card--rocket .sea--back { bottom: -10px; }

/* Пламя */
.ship-card--rocket .flame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 10%);
  width: 18px;
  height: 34px;
  background:
    radial-gradient(50% 60% at 50% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    radial-gradient(60% 80% at 50% 70%, #fbbf24, rgba(251,191,36,0) 70%),
    radial-gradient(60% 90% at 50% 100%, #f97316, rgba(249,115,22,0) 80%);
  filter: blur(0.2px);
  border-radius: 10px 10px 50% 50%;
  mix-blend-mode: screen;
  animation: flameFlicker .35s ease-in-out infinite alternate, flameStretch 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flameFlicker {
  from { transform: translate(-50%, 10%) scaleY(0.9); opacity: .9; }
  to { transform: translate(-50%, 12%) scaleY(1.05); opacity: 1; }
}
@keyframes flameStretch {
  0%,100% { height: 32px; }
  50% { height: 38px; }
}

/* Дым */
.ship-card--rocket .smoke {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ship-card--rocket .smoke::before,
.ship-card--rocket .smoke::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(203,213,225,.8), rgba(203,213,225,0) 70%);
  filter: blur(0.5px);
  animation: smokeRise 2.6s ease-in-out infinite;
}
.ship-card--rocket .smoke::after {
  left: 6px;
  width: 12px;
  height: 12px;
  animation-duration: 2.9s;
  animation-delay: .3s;
}
@keyframes smokeRise {
  0% { transform: translate(-50%, 0) scale(.6); opacity: .55; }
  60% { transform: translate(-50%, -22px) scale(1); opacity: .35; }
  100% { transform: translate(-50%, -34px) scale(1.2); opacity: 0; }
}

/* ========= Доступность ========= */
@media (prefers-reduced-motion: reduce) {
  .ship, .sea, .flag, .ship-img, .flame, .smoke { animation: none !important; }
}


.skills-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 500px)); /* макс. ширина */
    justify-content: center; /* центрируем ряды */
  }
}

.skill-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(30,64,175,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(30,64,175,.18);
}

.skill-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px; /* уменьшено, чтобы не было лишнего воздуха */
}

.skill-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font-size: 20px;
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.skill-badges li {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(191,219,254,.6);
  color: #1e3a8a;
  border: 1px solid rgba(30,64,175,.12);
}


/* ===== UI улучшения 10.08.2025 ===== */

/* Ссылки без подчёркивания и с мягким ховером */
a {
  text-decoration: none;
}
a:hover {
  color: #1d4ed8; /* ярко-синий при наведении */
}

/* Более контрастный текст на голубом фоне */
.bg-blue-100,
.text-blue-900 {
  color: #0f172a !important;
}
.bg-blue-100 a {
  color: #1d4ed8;
}

/* Выделение формы фоном */
#quick-order form {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.contact-section a {
  text-decoration: none;
  color: #1d4ed8; /* оставляем синий, чтобы было видно, что это ссылка */
}

.contact-section a:hover {
  color: #2563eb; /* чуть темнее при наведении */
}

.input-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #dc2626;
}
.input-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}